<template>
  <div class="page-wrapper">
    <div class="top">
      <div class="search-area">
        <router-link to="/index/search" class="search-btn">
            <img class="icon-search" src="../assets/icon-search.png" mode="aspectFit"/>搜索你想要的商品
        </router-link>
      </div>

      <div class="block">
        <el-carousel height="8rem" :interval="5000">
          <el-carousel-item v-for="(item,index) in advList" :key="index">
            <img :src="item.picUrl" height="100%" width="100%">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="main-nav">
          <router-link to="/assemble/assemble" class="nav-item">
            <div class="nav-img">
              <img class="img" src="../assets/xian-img.png" mode="aspectFit"/>
              <div class="icon-hot">
                <div class="hot-title">hot</div>
                <img class="icon-hot-bg" src="../assets/hotbg.png" mode="aspectFit"/>
              </div>
            </div>
            <div class="nav-title">限时秒杀</div>
          </router-link>
          <router-link class="nav-item" to="/assemble/teamList">
            <div class="nav-img">
              <img class="img" src="../assets/dijiahuopin.png" mode="aspectFit"/>
            </div>
            <div class="nav-title">低价火拼</div>
          </router-link>
          <!-- <div class="nav-item" @click="openSign">
            <div class="nav-img">
              <img class="img" src="../assets/meiriqiandao.png" mode="aspectFit"/>
            </div>
            <div class="nav-title">每日签到</div>
          </div> -->
          <router-link class="nav-item" to="/assemble/nounList">
            <div class="nav-img">
              <img class="img" src="../assets/jifen-img.png" mode="aspectFit"/>
            </div>
            <div class="nav-title">积分专区</div>
          </router-link>
      </div>
    </div>


    <div class="modals">
      <div class="modal-item">
        <div class="modal-header">
          <div class="header-title">
            <div class="sub-title">热门推荐</div>
            <img class="hot-rec-img" src="../assets/rementuijian.png" mode="aspectFit"/>
            </div>
        </div>
        <div class="modal-body">
          <div class="recom-main">
            <div class="scroll-view">
              <router-link :to="{path:'/goods/detail?id='+item.productId}" class="item-link" v-for="(item,index) in hotList" :key="index">
                <div class="item">
                  <img class="item-img" lazy-load="true" :src="item.picUrl" mode="aspectFit"/>
                  <div class="item-title">{{item.productName}}</div>
                  <div class="item-price">¥{{item.productPromotePrice/100}}</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-item">
        <div class="modal-header">
          <div class="header-title">
            <div class="sub-title">热门专区</div>
            <img class="hot-rec-img" src="../assets/remenzhuanqu.png" mode="aspectFit" />
          </div>
        </div>
        <div class="modal-body">
          <div class="project-main">
            <router-link class="project-left item" :to="{path:'/goods/detail?id='+item.productId}" v-for="(item,index) in hotAreaList" :key="index" v-show="index<2">
              <img class="item-img" :src="item.picUrl" mode="aspectFill"/>
            </router-link>
          </div>
        </div>
      </div>

      <div class="modal-item">
        <div class="modal-header">
          <div class="header-title">
            <div class="sub-title">猜你喜欢</div>
            <img class="hot-rec-img" src="../assets/cainixihuan.png" mode="aspectFit"/>
            </div>
        </div>
        <div class="modal-body">
          <div class="prefer-main">
              <router-link class="item-link" :to="{path:'/goods/detail?id='+item.productId}" v-for="(item,index) in guessLikeList" :key="index" >
                <div class="item">
                  <img class="item-img" lazy-load="true" :src="item.picUrl" mode="aspectFit"/>
                  <div class="item-title">{{item.productName}}</div>
                  <div class="item-price">￥{{item.productPromotePrice/100}}</div>
                </div>
              </router-link>
          </div>
        </div>
      </div>


      <!-- 每日签到 -->
      <div @touchmove.prevent style="position: fixed;top: 0;left: 0;height: 100%;width: 100%;background-color: rgba(0,0,0,0.3);z-index: 1000;" v-if="modalStatus">
        <div class="qian-w">
          <div class="qian-dialog" slot="content">
            <div class="dialog-content">
              <img class="header-bg" src="../assets/fubiao.png" mode="aspectFit"/>
              <div class="qian-header">
                <img class="qian-icon" src="../assets/qiandao.png" mode="aspectFit"/>
                每日签到
              </div>
              <div class="qian-body">
                <div class="list-content" v-if="signList.length > 0">
                  <div class="first">
                    <div :class="['it',item.sign ? 'active' :'']"  v-for="(item,index) in signList" :key="index" v-show="index < 4">                
                      <div class="num">+{{item.integral}}</div>
                      <div class="day">{{item.theDayStr}}</div>
                    </div>
                  </div>
                  <div class="second">
                    <div :class="['it' ,signList[4].sign? 'active' :'']">
                      <div class="num">+{{signList[4].integral}}</div>
                      <div class="day">{{signList[4].theDayStr}}</div>
                    </div>
                    <div :class="['it' ,signList[5].sign? 'active' :'']">
                      <div class="num">+{{signList[5].integral}}</div>
                      <div class="day">{{signList[5].theDayStr}}</div>
                    </div>
                    <div :class="['it' ,signList[6].sign? 'active' :'']">
                      <div class="num">+{{signList[6].integral}}</div>
                      <div class="day">{{signList[6].theDayStr}}</div>
                    </div>
                  </div>
                </div>
                <div class="btns">
                  <div class="btn sub-btn" @click="addsign">签到</div>
                  <div class="btn cancel-btn" @click="cancelSign">取消</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { API } from '../config'

export default {
  name: 'Home',
  data () {
    return {
      modalStatus: false,  //签到弹框是否打开
      hotList:[], // 热门推荐
      hotAreaList:[], // 热门专区
      guessLikeList:[], //猜你喜欢
      signList: [], // 积分
      advList:[],

      productName:"",
      productPromotePrice:"",
      item :{
        sign:'',
        integral:'',
        theDayStr:''
      },
      msg: 'Welcome to Your Vue.js App',
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      url: '',
    }
  },
   methods: {
     // 获取首页数据
     getHomeInfo(){
        let vm = this
        vm.$axios.get(API + '/home').then((response) => {
          if(response.data && response.data.data && response.data.data.advList && response.data.data.advList.length){
            vm.advList = response.data.data.advList
          }
          if(response.data && response.data.data && response.data.data.columnList && response.data.data.columnList.length){
            vm.hotList = response.data.data.columnList[0].productList
            vm.hotAreaList = response.data.data.columnList[1].productList
            vm.guessLikeList = response.data.data.columnList[2].productList
          }
        })
     },
     // 获取签到列表数据
     getSignRecordList() {
        let vm = this
        let accesstoken = vm.getLocalStorage('accesstoken')
        vm.$axios.get(API + '/signrecord/getList',{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
          if (response.data.code === 200) {
            vm.signList = response.data.data
          } else {
            vm.$message(response.data.msg)
          }
        })
     },
     // 积分签到
     addSignRecord() {
        let vm = this
        let accesstoken = vm.getLocalStorage('accesstoken')
        vm.$axios.post(API + '/signrecord/add',{},{
          headers: {'accesstoken': accesstoken}//设置header信息
        }).then((response) => {
          if (response.data.code === 200) {
              vm.$message('签到成功');
          } else {
            vm.$message(response.data.msg)
          }
          vm.getSignRecordList();
        })
     },
     openSign(){
        let vm = this
        vm.modalStatus = true
        vm.getSignRecordList()
     },
     addsign(){
        let vm = this
        vm.addSignRecord()
      },

      cancelSign(){
       let vm = this
       vm.modalStatus = false
     }
   },
   mounted () {
     let vm = this
     vm.getHomeInfo()
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '../css/index/index.less';
</style>
